<template>
    <el-dialog
        :title = "'修改' + title"
        :visible.sync = "editDialogVisible"
        width = "50%"
        @close = "EditClosed">
        <el-form ref = "editFormRef" :model = "editForm" :rules = "editFormRules">
            <el-form-item :label = "title" prop = "attr_name">
                <el-input v-model = "editForm.attr_name" :placeholder = "title"
                          @keyup.enter.native = "edit"
                ></el-input>
            </el-form-item>
        </el-form>
        <span slot = "footer" class = "dialog-footer">
    <el-button @click = "editDialogVisible = false">取 消</el-button>
    <el-button type = "primary" @click = "edit">确 定</el-button>
  </span>
    </el-dialog>
</template>

<script type = "text/javascript">
export default {
    name: "Ed-it",
    props: ['editFormData', "activeName", "cateId"],
    data () {
        return {
            editForm: {},
            editDialogVisible: false,
            editFormRules: {
                attr_name: [
                    {required: true, message: "请输入参数名称", trigger: 'blur'}
                ]
            }
        }
    },
    computed: {
        // 动态计算标题文本
        title () {
            if (this.activeName === "many") {
                return "动态参数";
            }
            return "静态属性";
        },
    },
    watch: {
        editFormData (value) {
            console.log(value)
            this.editForm = value
        }
    },
    methods: {
        edit () {
            this.$refs.editFormRef.validate(async valid => {
                if (!valid) return;
                const {data: res} = await this.$http.put(
                    `categories/${this.cateId}/attributes/${this.editForm.attr_id}`, {
                        attr_name: this.editForm.attr_name,
                        attr_sel: this.activeName,
                    });
                if (res.meta.status !== 200) {
                    return this.$message.error("参数更新失败");
                }
                this.$message.success("参数更新成功");
                this.editDialogVisible = false;
                this.$emit("getParamsData");
            })
        },
        EditClosed () {
        }
    }
}
</script>

<style lang = "less" scoped>

</style>
